<template>
  <div class="index-container-ty" style="background-color: #e8eff7; padding: 20px;">
    <a-row :gutter="16" style="height: 240px;">
      <a-col :span="8">
             
        <a-card title="开户信息" class="a-card-title-border">
          <a class="enterAccCls" @click="enterAccTab"><a-icon type="key" />进入开户</a> 
          <p style="margin-top:-10px;"></p>
           <!-- <a-card-grid style="width:45%;text-align:center;border:#8cccce solid 1px;margin-left: 5%;margin-top: 8px;">
             用户信息汇总
            </a-card-grid>     
            <a-card-grid style="width:45%;text-align:center;border:#8cccce solid 1px;;margin-right: 5%;;margin-top: 8px;">
              今日信息汇总
            </a-card-grid> -->
            <a-card-grid style="width:45%;text-align:center;border:#8cccce solid 1px;margin-left: 5%">
             总开户<span style="color:red">{{dataAcc.normalNum }} </span>
            </a-card-grid>     
            <a-card-grid style="width:45%;text-align:center;border:#8cccce solid 1px;;margin-right: 5%;">
              今日开户<span style="color:red">{{dataAcc.todayOpen }} </span>
            </a-card-grid>
            <a-card-grid style="width:45%;text-align:center;border:#8cccce solid 1px;margin-left: 5%">
             总销户<span style="color:red">{{dataAcc.cancelNum }} </span>
            </a-card-grid>     
            <a-card-grid style="width:45%;text-align:center;border:#8cccce solid 1px;;margin-right: 5%;">
              今日销户<span style="color:red">{{dataAcc.todayCance }} </span>
            </a-card-grid>
            <a-card-grid style="width:45%;text-align:center;border:#8cccce solid 1px;margin-left: 5%">
             总报停户数<span style="color:red">{{dataAcc.noticeNum }} </span>
            </a-card-grid>
            <a-card-grid style="width:45%;text-align:center;border:#8cccce solid 1px;;margin-right: 5%;">
              今日报停<span style="color:red">{{dataAcc.todayNotice }} </span> 
            </a-card-grid>
            <a-card-grid style="width:45%;text-align:center;border:#8cccce solid 1px;margin-left: 5%">
             总停水户数<span style="color:red">{{dataAcc.stopNum }} </span>
            </a-card-grid> 
            <a-card-grid style="width:45%;text-align:center;border:#8cccce solid 1px;margin-right: 5%;">
              今日停水<span style="color:red">{{dataAcc.todayStop }} </span> 
            </a-card-grid> 
        </a-card>
      </a-col>
      <a-col :span="7">
        <a-card title="抄表户" class="a-card-title-border">
          <p style="border-bottom:#8cccce solid 1px;">您本月已抄表<span style="color:red">{{dataAcc.readNum }} </span>        
            <span style="margin-left: 5px;">抄表水量 </span>
            <span style="color:red">{{dataRecord.readAccount }} </span> </p>
          <p style="border-bottom:#8cccce solid 1px;">本月未抄表<span style="color:red">{{dataAcc.unreadNum }} </span> </p>
        </a-card>
      </a-col>
      <a-col :span="9">
        <a-card title="抄表记录信息" class="a-card-title-border">
         <p style="border-bottom:#8cccce solid 1px;">您目前有
           <span style="color:red">{{dataRecord.pendingNum }} 条</span>抄表记录等待审核
         
          <p style="border-bottom:#8cccce solid 1px;">今日审核<span style="color:red">{{dataRecord.todayAudit }} 条</span> </p>
        </a-card>
      </a-col>     
    </a-row>
    <a-row :gutter="16" style="height:30px;">

    </a-row>
    <a-row :gutter="16" style="height: 240px;">
       <a-col :span="8">
        <a-card title="减免信息" class="a-card-title-border">
          <p style="border-bottom:#8cccce solid 1px;">今日水费相关减免<span style="color:red">{{dataDerate.waterNum }} 笔</span>        
            <span style="margin-left: 5px;">减免金额 </span> <span style="color:red">{{dataDerate.waterFee }} 元</span> </p>
          <p style="border-bottom:#8cccce solid 1px;">今日杂项费用减免<span style="color:red">{{dataDerate.alienNum }} 笔</span>        
            <span style="margin-left: 5px;">减免金额 </span> <span style="color:red">{{dataDerate.alienFee }} 元</span> </p>            
        </a-card>
      </a-col>
      <a-col :span="7">
        <a-card title="开票信息" class="a-card-title-border">
          <p style="border-bottom:#8cccce solid 1px;">今日已开收据<span style="color:red">{{dataVoucher.receiptNum }} 笔</span>        
            <span style="margin-left: 5px;">票据金额 </span> <span style="color:red">{{dataVoucher.receiptFee }} 元</span> </p>
          <p style="border-bottom:#8cccce solid 1px;">今日已开发票<span style="color:red">{{dataVoucher.billNum }} 笔</span>        
            <span style="margin-left: 5px;">票据金额 </span> <span style="color:red">{{dataVoucher.billFee }} 元</span> </p>   
        </a-card>
      </a-col>
      <a-col :span="9">
        <a-card title="今日收费" class="a-card-title-border">            
            <a class="enterFeeCls" @click="enterFeeTab"><a-icon type="pay-circle" />进入收费</a>           

            <a-card-grid style="width:96%;text-align:center;border:#8cccce solid 1px;margin-left: 2%;margin-top: 8px;">
             总笔数<span style="color:red">{{dataFee.todayNum }} 笔</span>        
            <span style="margin-left: 5px;">金额 </span> <span style="color:red">{{dataFee.todayFee }} 元</span>
            </a-card-grid>
          
            <a-card-grid style="width:48%;text-align:center;border:#8cccce solid 1px;margin-left: 2%">
             窗口退费<span style="color:red">{{dataFee.returnNum }} 笔</span>        
            <span style="margin-left: 5px;">金额 </span> <span style="color:red">{{dataFee.returnFee }} 元</span>
            </a-card-grid>     
            <a-card-grid style="width:48%;text-align:center;border:#8cccce solid 1px;;margin-right: 2%;">
               窗口现金<span style="color:red">{{dataFee.cashNum }} 笔</span>        
            <span style="margin-left: 5px;">金额 </span> <span style="color:red">{{dataFee.cashFee }} 元</span>
            </a-card-grid>
            <a-card-grid style="width:48%;text-align:center;border:#8cccce solid 1px;margin-left: 2%">
              窗口扫码<span style="color:red">{{dataFee.scanNum }} 笔</span>        
            <span style="margin-left: 5px;">金额 </span> <span style="color:red">{{dataFee.scanFee }} 元</span>
            </a-card-grid>     
            <a-card-grid style="width:48%;text-align:center;border:#8cccce solid 1px;;margin-right: 2%;">
               微信<span style="color:red">{{dataFee.wxNum }} 笔</span>        
            <span style="margin-left: 5px;">金额 </span> <span style="color:red">{{dataFee.wxFee }} 元</span>
            </a-card-grid>
            <a-card-grid style="width:48%;text-align:center;border:#8cccce solid 1px;margin-left: 2%">
             预存扣费<span style="color:red">{{dataFee.storeNum }} 笔</span>        
            <span style="margin-left: 5px;">金额 </span> <span style="color:red">{{dataFee.storeFee }} 元</span>
            </a-card-grid>
            <a-card-grid style="width:48%;text-align:center;border:#8cccce solid 1px;;margin-right: 2%;">
              银行代收<span style="color:red">{{dataFee.bankNum }} 笔</span>        
            <span style="margin-left: 5px;">金额 </span> <span style="color:red">{{dataFee.bankFee }} 元</span>
            </a-card-grid>
      
        </a-card>
      </a-col>     
    </a-row>   
  </div>
</template>

<script>
  import noDataPng from '@/assets/nodata.png'
  import { postAction} from '@/api/manage'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import store from '@/store/'

  //4-7天
  const tip_green = "rgba(0, 255, 0, 1)"
  //1-3天
  const tip_yellow = "rgba(255, 255, 0, 1)"
  //超期
  const tip_red = "rgba(255, 0, 0, 1)"

  export default {
    name: "IndexTask",
    components:{ JEllipsis },
    data() {
      return {
        loading:false,
        textMaxLength:8,
        dataAcc:{
          normalNum: 0,
          cancelNum: 0,
          noticeNum: 0,
          stopNum: 0,
          todayOpen: 0,
          todayCance: 0,
          todayNotice: 0,
          todayStop: 0,
          readNum: 0,
          unreadNum: 0,
        },
        dataRecord:{
          readAccount: 0,   
          pendingNum: 0,
          todayAudit: 0,              
        },
        dataDerate:{
          waterFee: 0,
          waterNum: 0,
          alienFee: 0,
          alienNum: 0
        },
        dataVoucher:{
          receiptFee: 0,
          receiptNum: 0,
          billFee: 0,
          billNum: 0
        },
        dataFee:{
          todayFee: 0,
          todayNum: 0,
          returnNum: 0,
          returnFee: 0,
          cashNum: 0,
          cashFee: 0,
          scanNum: 0,
          scanFee: 0,
          wxNum: 0,
          wxFee: 0,
          storeNum: 0,
          storeFee: 0,
          bankNum: 0,
          bankFee: 0
        }, 
      }
    },
    created() {
      this.initLoadData();
      this.times();      
    },
    mounted(){
    },
    methods: {
      getTipColor(rd){
        let num = rd.restDay
        if(num<=0){
          return tip_red
        }else if(num>=1 && num<4){
          return tip_yellow
        }else if(num>=4){
          return tip_green
        }
      },
      goPage(){
        this.$message.success("请根据具体业务跳转页面")
        //this.$router.push({ path: '/comp/mytask' })
      },
      enterFeeTab(){
        this.$router.push({path: '/modules/chg/ChgUniteFees'})  
      },
      enterAccTab(){
        this.$router.push({path: '/modules/arc/modules/ArcCusStepForm/new'}) 
      },
      ifNullDataSource(ds,tb){
        this.$nextTick(()=>{
          if(!ds || ds.length==0){
            var tmp = document.createElement('img');
            tmp.src=noDataPng
            tmp.width=300
            let tbclass=`${tb} .ant-table-placeholder`
            document.querySelector(tbclass).innerHTML=""
            document.querySelector(tbclass).appendChild(tmp)
          }
        })
      },
      handleData(){
        this.$message.success("办理完成")
      },
      initLoadData(){
        let loadDataUrl="/chg/chgFees/indexData";
        let param={

        }
        postAction(loadDataUrl, param).then((res) => {
            if (res.success) { 
              this.refrehData();
            }else{
                this.$message.warning(res.message) 
            }
          }).finally(() => {
            this.loading = false
          })
      },
      times(){			//定义了一个times()方法来执行定时查询findDB()
        	return setInterval(()=>{			//setInterval换个名字就行了
                   this.refrehData()
           },35000)		//设置时间，这里是35'
      },
      refrehData(){ 
        let indexDataJson=this.$store.getters.indexData;
       // console.log("--35秒首页刷新数据-store--",indexDataJson);
        if(indexDataJson && indexDataJson.dataAcc){
          this.dataAcc=indexDataJson.dataAcc; 
          if(indexDataJson.dataRecord){
            this.dataRecord=indexDataJson.dataRecord;
          }
          if(indexDataJson.dataDerate){
            this.dataDerate=indexDataJson.dataDerate;
          }
          if(indexDataJson.dataVoucher){
            this.dataVoucher=indexDataJson.dataVoucher;
          }
          if(indexDataJson.dataFee){
            this.dataFee=indexDataJson.dataFee;
          }
        }            
      }
    }
  }
</script>

<style>
  .my-index-table{height:270px}
  .my-index-table table{font-size: 14px !important;}

  /* .index-container-ty .ant-card-head-title{padding-top: 6px;padding-bottom: 6px;}
  .index-container-ty .ant-card-extra{padding:0}
  .index-container-ty .ant-card-extra a{color:#fff}
  .index-container-ty .ant-card-extra a:hover{color:#152ede} */
  .index-container-ty .ant-card-head-wrapper,.index-container-ty .ant-card-head{
    line-height:24px;
    min-height:24px;
    /*background: #90aeff;
    background: #7196fb;*/
  }
  .index-container-ty .ant-card-body{padding: 10px 12px 0px 12px;height: 190px;}

  /* .index-container-ty .ant-card-actions{background: #fff}
   .index-container-ty .ant-card-actions li {margin:2px 0;}
   .index-container-ty .ant-card-actions > li > span{width: 100%}*/


  .index-container-ty .ant-table-footer{text-align: right;padding:6px 12px 6px 6px;background: #fff;border-top: 2px solid #f7f1f1;}

.ant-card-head {
    min-height: 48px;
    margin-bottom: -1px;
    padding: 0 24px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
    font-size: 16px;
    background: transparent;
    border-bottom: 1px solid rgb(140, 204, 206);
    border-radius: 2px 2px 0 0;
    zoom: 1;
  }
  .a-card-title-border{
    background-color: #e8eff7;
    border:#8cccce solid 2px;
  }
  .a-card-body-pborder{ 
    border:#8cccce solid 2px;
  }
  .index-md-title{
    postion:relative;
    padding-left:24px;
    width: 100%;
    color: #fff;
    font-size: 21px;
    font-family: cursive;
  }
  .index-md-title img{
    position: absolute;
    height:32px;
    top: 2px;
    left:14px;
  }

  .index-container-ty .ant-card-body{
    /*border-left:1px solid #90aeff;
    /*border-right:1px solid #90aeff;
    border-bottom:1px solid #90aeff;*/
  }
.ant-card-grid {
    float: left;
    width: 33.33%;
    padding: 6px;
    border: 0;
    border-radius: 0;
    box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8, 1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
    transition: all 0.3s;
  }

  .index-container-ty .ant-table-thead > tr > th,
  .index-container-ty .ant-table-tbody > tr > td{
    border-bottom: 1px solid #90aeff;
  }

  .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
  .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th{
    border-bottom: 1px solid #90aeff;
  }

  .index-container-ty  .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th{
    border-bottom: 1px solid #90aeff;
  }

  .index-container-ty .ant-table-small{
    border: 1px solid #90aeff;
  }

  .index-container-ty .ant-table-placeholder {
    padding: 0
  }
  .enterFeeCls{
    position:relative;
    left: 390px;
    top: -40px;
    font-weight: 600;
  }
  .enterAccCls{
    position:relative;
    left: 90px;
    top: -40px;
    font-weight: 600;
  }
</style>